<template>
  <el-dialog
    :before-close="handleClose"
    :close-on-click-modal="false"
    title="创建新行为类型"
    :visible.sync="dialogVisible"
  >
    <el-form
      ref="ruleForm"
      v-loading="loading"
      label-width="120px"
      :model="ruleForm"
      :rules="rules"
      size="mini"
    >
      <el-form-item label="行为类型名" prop="activity_name">
        <el-input
          v-model="ruleForm.activity_name"
          placeholder="请输入行为类型名"
          spellcheck="false"
        />
      </el-form-item>
      <el-form-item label="行为类型ID" prop="activity_id">
        <el-input
          v-model="ruleForm.activity_id"
          placeholder="请输入行为类型ID"
          spellcheck="false"
        />
      </el-form-item>
      <el-form-item label="监控器类型ID" prop="monitor_id">
        <el-select v-model="ruleForm.monitor_id">
          <el-option
            v-for="(item, index) in monitor_list"
            :key="index"
            :label="item.monitor_name"
            :value="item.monitor_id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="动作类型ID" prop="action_id">
        <el-select v-model="ruleForm.action_id">
          <el-option
            v-for="(item, index) in action_list"
            :key="index"
            :label="item.action_name"
            :value="item.action_id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="客户端匹配">
        <el-switch v-model="ruleForm.apply_on" />
      </el-form-item>
      <el-form-item label="初始状态">
        <el-switch v-model="ruleForm.is_disable" />
      </el-form-item>
      <el-form-item label="EULA" prop="pattern">
        <el-input
          v-model="ruleForm.pattern"
          :autosize="{ minRows: 4, maxRows: 20 }"
          spellcheck="false"
          type="textarea"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit('ruleForm')">保存</el-button>
        <el-button @click="dialogVisible = false">返回</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import monitor from "@/api/recognize/monitor";
import action from "@/api/recognize/action";
import clearWatch from "@/utils/mixin/clearWatch";
import activity from "@/api/recognize/activity";
export default {
  name: "NewDeed",
  mixins: [clearWatch],
  data() {
    return {
      dialogVisible: false,
      loading: false,
      ruleForm: {
        activity_name: "",
        activity_id: "",
        monitor_id: "",
        action_id: "",
        apply_on: false,
        is_disable: false,
        pattern: ""
      },
      rules: {
        activity_name: [
          { required: true, message: "请输入行为类型名", trigger: "blur" }
        ],
        activity_id: [
          { required: true, message: "请输入行为类型ID", trigger: "blur" }
        ],
        monitor_id: [
          { required: true, message: "请选择监控器类型ID", trigger: "change" }
        ],
        action_id: [
          { required: true, message: "请选择动作类型ID", trigger: "change" }
        ],
        pattern: [{ required: true, message: "请输入EULA", trigger: "change" }]
      },
      monitor_list: [],
      action_list: []
    };
  },
  methods: {
    handleClose(done) {
      done();
    },
    async show() {
      this.dialogVisible = !this.dialogVisible;
      this.loading = true;

      monitor
        .name_list()
        .then(res => {
          this.monitor_list = res.data.name_list;
          return action.name_list();
        })
        .then(res => {
          this.action_list = res.data.name_list;
          this.loading = false;
        });
    },

    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let data = Object.assign({}, this.ruleForm);
          data.apply_on = data.apply_on ? "ClientMatch" : "DefineOnly";
          data.pattern = data.pattern || "{}";
          data.pattern = JSON.parse(data.pattern);
          data.is_disable = !data.is_disable;
          activity.create({ ...data }).then(res => {
            this.$emit("change");
            this.$message.success(res.data.message);
            this.dialogVisible = false;
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>
